﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "装箱管理列表";
    Layout = null;
}
@Html.AntiForgeryToken()
@using Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <link href="~/Views/WarehouseManagement/PackingView.custom.css" rel="stylesheet" />
</head>
<body>
    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-boxes"></i>
                装箱管理
            </h1>
        </div>

        <!-- 主要内容卡片 -->
        <div class="content-card">
            <!-- 搜索区域 -->
            <div class="search-section">
                <form class="search-form" lay-filter="searchForm">
                    <div class="form-group">
                        <label class="form-label">装箱单编号</label>
                        <input type="text" name="PackingCode" placeholder="请输入装箱单编号" autocomplete="off" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">检查员名称</label>
                        <input type="text" name="Inspector" placeholder="请输入检查员名称" autocomplete="off" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">销售订单编号</label>
                        <input type="text" name="SaleOrderCode" placeholder="请输入销售订单编号" autocomplete="off" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">客户名称</label>
                        <input type="text" name="CustomerName" placeholder="请输入客户名称" autocomplete="off" class="form-input">
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-primary" lay-submit lay-filter="search">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                        <button type="reset" class="btn btn-secondary">
                            <i class="fas fa-redo"></i> 重置
                        </button>
                    </div>
                </form>
            </div>

            <!-- 工具栏 -->
            <div class="toolbar-section">
                <div class="toolbar">
                    <button class="btn btn-primary" id="btnAdd">
                        <i class="fas fa-plus"></i> 新增装箱单
                    </button>
                    <button class="btn btn-danger" lay-event="batchDel">
                        <i class="fas fa-trash"></i> 批量删除
                    </button>
                    <button class="btn btn-secondary" id="btnExport">
                        <i class="fas fa-download"></i> 导出数据
                    </button>
                </div>
            </div>

            <!-- 表格区域 -->
            <div class="table-section">
                <table id="packingTable" lay-filter="packingTable"></table>
            </div>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationBar">
        <a class="action-btn btn btn-primary" lay-event="edit">
            <i class="fas fa-edit"></i> 编辑
        </a>
        <a class="action-btn btn btn-danger" lay-event="del">
            <i class="fas fa-trash"></i> 删除
        </a>
    </script>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            // 获取token
            var token = $('input[name="__RequestVerificationToken"]').val();

            // 表格渲染
            table.render({
                elem: '#packingTable',
                url: '/WarehouseManagement/QueryPacking',
                method: 'post',
                contentType: 'application/json',
                where: {},
                page: true,
                limit: 15,
                limits: [15, 30, 50, 100],
                height: 'auto',
                cols: [[
                    {type: 'checkbox', fixed: 'left', width: 50},
                    {field: 'packingCode', title: '装箱单编号', width: 160, sort: true},
                    {field: 'packingDate', title: '装箱日期', width: 120, templet: function(d){
                        return d.packingDate ? layui.util.toDateString(new Date(d.packingDate), 'yyyy-MM-dd') : '';
                    }},
                    {field: 'saleOrderCode', title: '销售订单编号', width: 160},
                    {field: 'invoiceCode', title: '发票编号', width: 120},
                    {field: 'customerCode', title: '客户编码', width: 120},
                    {field: 'customerName', title: '客户名称', width: 150},
                    {field: 'packingLength', title: '长度', width: 80},
                    {field: 'packingWidth', title: '宽度', width: 80},
                    {field: 'packingHeight', title: '高度', width: 80},
                    {field: 'packingSize', title: '单位', width: 80},
                    {field: 'netWeight', title: '净重', width: 80},
                    {field: 'grossWeight', title: '毛重', width: 80},
                    {field: 'unitWeight', title: '重量单位', width: 80},
                    {field: 'inspector', title: '检查员', width: 100},
                    {title: '操作', width: 180, toolbar: '#operationBar', fixed: 'right'}
                ]],
                response: {
                    statusCode: 0
                },
                parseData: function(res){
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                },
                done: function() {
                    // 表格渲染完成后的回调
                    console.log('表格渲染完成');
                }
            });

            // 搜索表单提交
            form.on('submit(search)', function(data){
                layer.load(1, {shade: [0.3, '#000']});
                table.reload('packingTable', {
                    where: data.field,
                    page: {curr: 1},
                    method: 'post',
                    contentType: 'application/json',
                    url: '/WarehouseManagement/QueryPacking',
                    done: function() {
                        layer.closeAll('loading');
                    }
                });
                return false;
            });

            // 新增按钮点击事件
            $('#btnAdd').on('click', function(){
                location.href = '/WarehouseManagement/CreatePackingView';
            });

            // 导出按钮点击事件
            $('#btnExport').on('click', function(){
                layer.msg('导出功能开发中...', {icon: 1});
            });

            // 批量删除
            $('.layui-btn[lay-event="batchDel"]').on('click', function(){
                var checkStatus = table.checkStatus('packingTable');
                var data = checkStatus.data;
                if(data.length === 0){
                    layer.msg('请选择要删除的记录', {icon: 2});
                    return;
                }
                layer.confirm('确定要删除选中的 ' + data.length + ' 条记录吗？', {
                    icon: 3,
                    title: '确认删除'
                }, function(index){
                    var ids = data.map(function(item){ return item.id; });
                    $.ajax({
                        url: '/WarehouseManagement/BatchDeletePacking',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        headers: {
                            'RequestVerificationToken': token
                        },
                        success: function(res){
                            if(res.success){
                                layer.msg('删除成功', {icon: 1});
                                table.reload('packingTable');
                            } else {
                                layer.msg(res.message || '删除失败', {icon: 2});
                            }
                        },
                        error: function(){
                            layer.msg('操作失败，请重试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            });

            // 监听工具条
            table.on('tool(packingTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    location.href = '/WarehouseManagement/UpdatePackingView?id=' + data.id;
                } else if(obj.event === 'del'){
                    layer.confirm('确定删除此记录？', {
                        icon: 3,
                        title: '确认删除'
                    }, function(index){
                        $.ajax({
                            url: '/WarehouseManagement/BatchDeletePacking',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify([data.id]),
                            headers: {
                                'RequestVerificationToken': token
                            },
                            success: function(res){
                                if(res.success){
                                    layer.msg('删除成功', {icon: 1});
                                    obj.del();
                                } else {
                                    layer.msg(res.message || '删除失败', {icon: 2});
                                }
                            },
                            error: function(){
                                layer.msg('操作失败，请重试', {icon: 2});
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html>
